<template>
    <div class="waitList">
         <!-- 顶部 -->
        <div class="orderHeader">
            <div class="headerLeft">
                <i class="icon-back" @click="$router.go(-1)"></i>
            </div>
            <div class="headerMiddle">待支付订单</div>
            <div class="headerBottom">
                <router-link to="/home" tag="i" class="icon-home"></router-link>
            </div>
        </div>
      
        <!-- 订单栏 -->
        <!-- <div class="orderList-items">
            <div class="order-header">
                <span>唯品会自营</span>
                <span>待支付</span>
            </div>
            <div class="order-content">
                <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2020/05/15/150/c7de90bd-6743-49a7-b2df-73ac61900198-50_420_531_124x154_90.jpg" alt="">
                <div class="order-content-right">
                    <div class="content-right-top">
                        <div>【舒适百搭】春秋运动卫衣男式潮流百搭休闲印花套头男款连帽上衣</div>
                        <span>￥41</span>
                    </div>
                    <div class="content-right-middle">
                        <div>黑色，L</div>
                        <span>×1</span>
                    </div>
                    <div class="content-right-bottom">
                        <div><span>该商品很抢手，请尽快支付喔</span></div>
                    </div>
                </div>
            </div>
            <div class="order-bottom-argin">
                <div>确认支付</div>
                <div>取消订单</div>
            </div>
        </div> -->

        <!-- 支付订单为零 显示 -->
        <van-empty description="没有待支付订单喔" v-if="orderList.length == 0" />

        <div class="totalOrder" v-if="orderList.length > 0">
            <div class="orderList-items" v-for="(item,index) in orderList" :key="index" >
                <div class="order-header">
                    <span>唯品会自营</span>
                    <span>待支付</span>
                </div>
               <div class="order-content">
                <img :src="item.image" alt="">
                <div class="order-content-right">
                    <div class="content-right-top">
                        <div>{{item.productTitle}}</div>
                        <span>￥{{ item.minPrice * item.num}}</span>
                    </div>
                    <div class="content-right-middle">
                        <div>{{item.color}}，{{item.size}}</div>
                        <span>×{{item.num}}</span>
                    </div>
                    <div class="content-right-bottom">
                        <div><span>该商品很抢手，请尽快支付喔</span></div>
                    </div>
                </div>
                </div>
                <div class="order-bottom-argin">
                    <div @click="addProduct(index)">确认支付</div>
                    <div @click="del(index)">取消订单</div>
                </div>
            </div>
        </div>
        <!-- 背景栏 -->
        <div class="no-background" v-if="orderList.length > 0">
            <div>没有更多了</div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"waitListView",
         data() {
            return {
                orderList: [], //未支付订单
                payTotalList:null //本地存储的已经支付的订单
            };
        },
        methods:{
            // 删除订单
            del(index){
                this.orderList.splice(index,1);
                window.localStorage.setItem("waitList",JSON.stringify(this.orderList));
            },
            // 确认订单
            addProduct(index){
                console.log(this.orderList[index]);
                // 添加数据到本地
                this.payTotalList.push(this.orderList[index]);
                // 重新设置本地存储数据
                window.localStorage.setItem("payList",JSON.stringify(this.payTotalList));

                this.del();
                 this.$toast.success("支付成功");
            }
        },
        created(){
            // 获取未支付的订单
             if(window.localStorage.getItem("waitList")){
                this.orderList = JSON.parse(window.localStorage.getItem("waitList"));
                console.log(this.orderList);
            }
             // 已经支付的订单的数据
            if(window.localStorage.getItem("payList")){
                this.payTotalList = JSON.parse(window.localStorage.getItem("payList"));
            }
        },
        filters:{
          "minPrice":function(value){
            return parseInt(value);
            
          }
        }
    }
</script>

<style lang="scss" scoped>
.waitList{
    height: 100%;
    background-color: #f3f4f5;
    .orderHeader{
        width: 100%;
        display: flex;
        height: 44px;
        background-color: #fff;
        
        .headerLeft{
            width: 46px;
            height: 44px;
            text-align: center;
            line-height: 44px;
            font-size:28px ;
            margin-left: 10px;
        }
        .headerMiddle{
            flex: 1;
            height: 44px;
            text-align: center;
            line-height: 44px;
            font-size: 18px;

        }
        .headerBottom{
             width: 46px;
            height: 44px;
            text-align: center;
            line-height: 44px;
            font-size:20px ;
            margin-right: 10px;
        }
    }

    .orderList-items{
        margin-top:10px;
        width: 100%;
        height: 235px;
        background-color: #fff;

        .order-header{
            width: 345px;
            height: 51px;
            margin:0 15px;
            border-bottom:1px solid #e7e7e7;
            display: flex;
            justify-content: space-between;
            span{
                font-size: 16px;
                line-height: 51px;
                
                &:nth-child(2){
                    color: #98989f;
                }
            }
        }
        .order-content{
            width: 375px;
            height: 103px;
            box-sizing: border-box;
            padding:20px 15px 0;
            display: flex;
            justify-content: flex-start;
            img{
                width: 61px;
                height: 76px;
                margin-right: 15px;

            }
            .order-content-right{
                display: flex;
                flex-direction: column;
                width: 100%;
                .content-right-top{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    margin-bottom: 10px;
                    height: 30px;
                    div{
                        width: 198px;
                        height: 29px;
                        font-size: 14px;
                        color: #232323;
                        margin-right: 8px;
                        overflow : hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                    span{
                        font-size: 16px;
                        color: #232323;
                        font-weight: 550;

                    }
                }

                .content-right-middle{
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    div{
                        font-size: 14px;
                        color: #999999;
                    }
                    span{
                        font-size: 14px;
                        color: #999999;
                        margin-top: 4px;
                    }
                }
            }
            .content-right-bottom{
                display: flex;
                margin-top:10px ;
                div{
                    height: 16px;
                    line-height: 16px;
                    text-align: center;
                    background-color: #fff;
                    border: 1px solid #de3d96;
                    margin-right: 3px;
                    border-radius: 5px;
                    span{
                        display: inline-block;
                        color: #de3d96;
                        font-size: 12px;
                        transform: scale(0.9);
                    }
                }
            }
        }
        .order-bottom-argin{
            margin:12px 15px 0;
            padding:15px 0 ;
            height: 67px;
            width: 345px;
            border-top: 1px dashed #e7e7e7;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-end;
            div{
                margin:0 5px;
                width: 83px;
                height: 35px;
                text-align: center;
                line-height: 35px;
                color: #de3d96;
                border: 1px solid #de3d96;
                border-radius: 5px;
                font-size: 14px;
            }
        }
    }

    .no-background{
        padding: 20px 10px;
        height: 52px;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        font-size: 12px;
        color: #999999;
        background-color: #f3f4f5;
    }
}
</style>